<script setup lang="ts">
const ruleForm = reactive({
    pass: '',
    checkPass: '',
    phone: '',
    username: '',
    avatar: ''
})

//校验账号
const checkPhone = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('账号不能为空'))
    }
    setTimeout(() => {
        if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
            callback(new Error('请输入正确的手机号码'))
        } else {
            callback()
        }
    }, 1000)
}

//校验密码
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('密码不能为空'))
    } else {
        if (!/^(\w){6,16}$/.test(value)) {
            callback(new Error('密码格式不正确'))
        } else {
            callback()
            // ruleFormRef.value.validateField('checkPass', () => null)
        }
    }
}
</script>

<template>
    <div class="total">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="账号" prop="phone">
                <el-input v-model.number="ruleForm.phone" placeholder="手机号码" />
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input v-model="ruleForm.pass" type="password" autocomplete="off"
                    placeholder="长度建议在6-16位,至少使用两种字符" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>
.total {
    width: 50%;
    height: auto;
    position: absolute;
    top: 0.6rem;
    left: 25%;
}
</style>
